<template>
  <div class="container">
    <div class="mb10">
      <el-text class="mx-1"> 查询条件：</el-text>
    </div>
    <el-row :gutter="10">
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.order_no" clearable placeholder="请输入订单编号"></el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.goods_name" clearable placeholder="请输入商品名称"></el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.user_name" clearable placeholder="请输入收货人姓名"></el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.mobile" clearable placeholder="请输入收货人手机号"></el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.status" clearable placeholder="请选择状态" class="">
          <el-option v-for="item in selectStatus" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.is_print" clearable placeholder="是否打印">
          <el-option v-for="item in selectWhether" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.delivery_type" placeholder="请选择配送方式" clearable>
          <el-option v-for="item in selectDeliveryType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.express_no" clearable placeholder="请输入快递单号"></el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-date-picker
          v-model="queryDate"
          type="datetimerange"
          range-separator="至"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="创建时间"
          @change="(data: string[]) => changeQueryDate(data, 'start_create_time', 'end_create_time')"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-date-picker
          v-model="payTime"
          type="datetimerange"
          range-separator="至"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="支付时间"
          @change="(data: string[]) => changeQueryDate(data, 'start_pay_time', 'end_pay_time')"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-date-picker
          v-model="deliveryTime"
          type="datetimerange"
          range-separator="至"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="发货时间"
          @change="(data: string[]) => changeQueryDate(data, 'start_delivery_time', 'end_delivery_time')"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-space wrap>
          <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
          <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
        </el-space>
      </el-col>
    </el-row>
    <div class="mb10">
      <el-text class="mx-1"> 查询结果：</el-text>
    </div>
    <el-space wrap class="mb20">
      <el-button type="primary" :icon="Printer" :disabled="disabledbtn" @click="handleBatchPrint">批量打印订单</el-button>
      <el-button type="success" :icon="Printer" :disabled="disabledbtn" @click="handleBatchPrintExpressSingle(0)">批量打印快递单</el-button>
      <el-button type="success" :icon="Printer" :disabled="disabledbtn" @click="handleBatchPrintExpressSingle(1)">合并打印快递单</el-button>
      <!-- <el-popconfirm placement="top" width="160" title="你确定要删除吗?" @confirm="batchDelete">
        <template #reference>
          <el-button type="danger" :icon="Delete" :disabled="disabledbtn">批量删除 </el-button>
        </template>
      </el-popconfirm> -->
      <el-button type="primary" :icon="Download" :disabled="disabledbtn" @click="handleGetMallOrderExportExcelInfo">导出excel</el-button>
    </el-space>
    <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" v-loading="loading" :reserve-selection="true" @row-dblclick="rowDblclick">
      <el-table-column type="index" align="center"> </el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="order_no" label="订单号" align="center"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名称" align="center" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="num" label="数量" align="center"> </el-table-column>
      <el-table-column prop="pay_price" label="实付金额/元" align="center"> </el-table-column>
      <el-table-column prop="statusName" label="订单状态" align="center"> </el-table-column>
      <el-table-column prop="deliveryName" label="配送方式" align="center"> </el-table-column>
      <el-table-column prop="express_no" label="快递单号" align="center"> </el-table-column>
      <el-table-column prop="user_name" label="收货信息" align="center">
        <template #default="scope">
          <div class="ibDraggable">
            <div>{{ scope.row.user_name }}</div>
            <div>{{ scope.row.mobile }}</div>
            <div>{{ scope.row.full_address }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center"> </el-table-column>
      <el-table-column prop="pay_time" label="支付时间" align="center">
        <template #default="scope">
          {{ [null, ""].includes(scope.row.pay_time) ? "--" : scope.row.pay_time }}
        </template>
      </el-table-column>
      <el-table-column prop="delivery_time" label="发货时间" align="center">
        <template #default="scope">
          {{ [null, ""].includes(scope.row.delivery_time) ? "--" : scope.row.delivery_time }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="210" align="center">
        <template #default="scope">
          <div class="control-flex">
            <el-button type="primary" link :icon="View" @click="handleViewEdit(scope.row, 'view')">查看</el-button>

            <el-button v-show="scope.row.is_print === 0 && ['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)" v-permission="'getOrderPrint'" type="success" link :icon="Printer" @click="handlePrintOrder(scope.row.id)">打印订单</el-button>

            <el-button v-show="scope.row.is_print === 1 && ['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)" v-permission="'getOrderPrint'" type="info" link :icon="Printer" @click="handlePrintOrder(scope.row.id)">已打印</el-button>

            <el-button v-show="['toBeDelivered'].includes(scope.row.status) && scope.row.delivery_type === 'expressDelivery'" v-permission="'orderDelivery'" type="success" link :icon="Van" @click="handleGoodsShip(scope.row)">发货</el-button>

            <el-button v-show="['toBeReceived'].includes(scope.row.status) && scope.row.delivery_type === 'expressDelivery'" v-permission="'orderDelivery'" type="success" link :icon="EditPen" @click="handleGoodsShip(scope.row)">修改物流单号</el-button>

            <el-button v-show="['toBeDelivered'].includes(scope.row.status) && scope.row.express_no === ''" v-permission="'cancelOrder'" link :icon="EditPen" type="success" @click="handlePrintExpress(scope.row)">打印快递单</el-button>

            <div v-show="['toBeReceived', 'toBeDelivered'].includes(scope.row.status) && scope.row.express_no !== ''" v-permission="'cancelOrder'">
              <el-popconfirm placement="top" width="160" title="你确定要重新打印快递单吗?" @confirm="handleReprintPrintExpress(scope.row)">
                <template #reference>
                  <el-button link :icon="EditPen" type="success">重新打印快递单</el-button>
                </template>
              </el-popconfirm>
            </div>

            <div v-show="scope.row.status === 'pendingPayment'" v-permission="'cancelOrder'">
              <el-popconfirm placement="top" width="160" title="你确定要取消订单吗?" @confirm="handleCancelOrder(scope.row.id)">
                <template #reference>
                  <el-button link :icon="Close" type="danger">取消订单</el-button>
                </template>
              </el-popconfirm>
            </div>
            <!-- 只有在 业务员配送 和 门店自提的时候 可以显示 -->
            <div v-show="['storePickup', 'salesmanDistribution'].includes(scope.row.delivery_type) && ['toBeDelivered'].includes(scope.row.status)" v-permission="'confirmOrder'">
              <el-popconfirm placement="top" width="160" title="你确定要收货吗?" @confirm="handleReceiptOrder(scope.row.id)">
                <template #reference>
                  <el-button link :icon="EditPen" type="success">确认收货</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-show="['toBeDelivered', 'toBeReceived', 'completed'].includes(scope.row.status)" v-permission="'applyRefundOrder'">
              <el-popconfirm placement="top" width="160" title="你确定要申请退款吗?" @confirm="handleApplyRefund(scope.row.id)">
                <template #reference>
                  <el-button link :icon="EditPen" type="primary">申请退款</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-show="scope.row.status === 'refunding'" v-permission="'agreeRefundOrder'">
              <el-popconfirm placement="top" width="160" title="你确定要同意退款吗?" @confirm="handleAgreeToRefund(scope.row.id)">
                <template #reference>
                  <el-button link :icon="CircleCheck" type="success">同意</el-button>
                </template>
              </el-popconfirm>
            </div>
            <el-button type="warning" link :icon="ChatDotSquare" @click="handleOrderRemark(scope.row)">商家备注</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="searchCondition.size"
        :current-page="searchCondition.current"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="total"
        :hide-on-single-page="false">
      </el-pagination>
    </div>

    <!-- 选择快递公司，批量生成快递单号 -->
    <PrintExpressDialog :logisticsList="logisticsList" v-model:editVisible="expressDialogVisible" v-model:form="expressPrintForm" @handleSuccess="handleExpressPrintSuccess" />
    <!-- 物流单号注弹出框 -->
    <TrackingNumberDialog :logisticsList="logisticsList" v-model:editVisible="trackingNumberVisible" v-model:form="trackingNumberForm" @handleSuccess="handleRackingNumberSuccess" />
    <!-- 商家备注弹出框 -->
    <RemarkDialog v-model:editVisible="remarkVisible" v-model:form="sellerRemarkForm" @handleSuccess="handleRemarkSuccess" />
  </div>
</template>

<script setup lang="ts">
import PrintExpressDialog from "@/components/redPacketMallManage/redPacketMallOrderInfo/PrintExpressDialog.vue";
import TrackingNumberDialog from "@/components/redPacketMallManage/redPacketMallOrderInfo/TrackingNumberDialog.vue";
import RemarkDialog from "@/components/redPacketMallManage/redPacketMallOrderInfo/RemarkDialog.vue";
import { View, Close, CircleCheck, Search, Refresh, Printer, Download, ChatDotSquare, Van, EditPen } from "@element-plus/icons-vue";
import type { ViewMode, ViewModeFilter } from "@/types/common";
import type { IDictData } from "@/types/dict";
import { useState } from "@/hooks/useState.ts";
import { getMallOrderExportExcelInfo, getMallOrderInfo, getMallOrderPrintOldExpressInfo, putMallApplyRefundOrderInfo, putMallOrderAgreeRefundInfo, putMallOrderCancelInfo, putMallOrderConfirmInfo } from "@/utils/api/mallOrder";
import type { IExportExcel, IMallOrderListVO, IMallOrderPrintExpressInfo, IMallOrderRemark, IMallOrderTrackingNumber, ISearchMallOrder } from "@/types/redPacketMallManage/mallOrder";
import type { IExpressOften } from "@/types/express";
import { getLogisticsInfo } from "@/utils/api/express";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  selectStatus: Array<IDictData>;
  selectWhether: Array<IDictData>;
  selectDeliveryType: Array<IDictData>;
}
const { selectStatus, selectWhether, selectDeliveryType } = defineProps<Props>();

const emit = defineEmits<{
  handleAdd: [code: ViewMode];
  handleToPrint: [ids: number[]];
  handleViewEdit: [id: number, code: ViewModeFilter];
}>();
/* 暴露一个方法给父组件使用 */
defineExpose({
  /* 这一步关键，在setup语法糖中使用时 */
  getTableInfo,
  handleChangePrintState
});
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */
const queryDate = ref<Array<string>>([]);
const printIds = ref<Array<number>>([]); /* 打印订单的id */
const payTime = ref<Array<string>>([]);
const deliveryTime = ref<Array<string>>([]);
const total = ref(0);
const trackingNumberVisible = ref(false); /* 物流单号注弹出框 */
const expressDialogVisible = ref(false); /* 批量生成物流单号注弹出框 */
const remarkVisible = ref(false); /* 商家备注弹出框 */
const searchCondition = reactive<ISearchMallOrder>({
  goods_name: "",
  order_no: "",
  user_name: "",
  mobile: "",
  delivery_type: "",
  express_no: "",
  is_print: "",
  start_create_time: "",
  end_create_time: "",
  start_pay_time: "",
  end_pay_time: "",
  start_delivery_time: "",
  end_delivery_time: "",
  status: [],
  size: 10,
  current: 1
});
const tableList = ref<Array<IMallOrderListVO>>([]);
const logisticsList = ref<Array<IExpressOften>>([]);

const sellerRemarkForm = reactive<IMallOrderRemark>({
  id: 0,
  seller_remark: ""
});
const expressPrintForm = reactive<IMallOrderPrintExpressInfo>({
  ids: [],
  express_id: 0,
  is_merge_order: 0
});
const trackingNumberForm = reactive<IMallOrderTrackingNumber>({
  id: 0,
  express_id: "",
  express_no: ""
});

/* 时间更改事件 */
function changeQueryDate(data: string[], startTime: "start_create_time" | "start_pay_time" | "start_delivery_time", endTime: "end_create_time" | "end_pay_time" | "end_delivery_time") {
  if (data !== null) {
    searchCondition[startTime] = data[0];
    searchCondition[endTime] = data[1];
  } else {
    searchCondition.start_create_time = "";
    searchCondition.end_create_time = "";
  }
}
/* 搜索 */
function searchInfo() {
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.goods_name = "";
  searchCondition.order_no = "";
  searchCondition.user_name = "";
  searchCondition.mobile = "";
  searchCondition.delivery_type = "";
  searchCondition.express_no = "";
  searchCondition.is_print = "";
  searchCondition.start_create_time = "";
  searchCondition.end_create_time = "";
  searchCondition.start_pay_time = "";
  searchCondition.end_pay_time = "";
  searchCondition.start_delivery_time = "";
  searchCondition.end_delivery_time = "";
  searchCondition.status = [];
  queryDate.value = [];
  payTime.value = [];
  deliveryTime.value = [];
  searchCondition.current = 1;
  searchCondition.size = 10;

  getTableInfo();
}
/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getMallOrderInfo<IMallOrderListVO, ISearchMallOrder>(searchCondition)
    .then(res => {
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 获取物流公司信息 */
function handleGetLogisticsInfo() {
  getLogisticsInfo<Array<IExpressOften>>()
    .then(res => {
      logisticsList.value = res.result;
    })
    .catch(() => {});
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.current = 1;
  searchCondition.size = val;
  getTableInfo();
}

/* 触发处理 查看编辑事件 */
function handleViewEdit(row: IMallOrderListVO, code: ViewModeFilter) {
  emit("handleViewEdit", row.id, code);
}

/* 双击当前行 */
function rowDblclick(row: IMallOrderListVO) {
  multipleTableRef.value!.toggleRowSelection(row);
}

/* 批量处理 确认打印 */
function handleChangePrintState() {
  printIds.value.forEach((id: number) => {
    const item = tableList.value.find(item => item.id === id);
    if (item) {
      item.is_print = 1;
      console.log("执行了");
    }
  });
  printIds.value = [];
}

/* 批量处理 打印*/
function handleBatchPrint() {
  /* 获取选中的数据 */
  let selection = multipleTableRef.value!.store.states.selection.value;
  if (selection.length === 0) {
    ElMessage.warning("请至少选择一条数据");
    return;
  }
  let idArray = [];
  for (const item of selection) {
    idArray.push(item.id);
  }
  /* 获取要批量修改数据的id值数组 (单个与批量删除相同) */
  printIds.value = [];
  for (let i = 0; i < idArray.length; i++) {
    printIds.value.push(selection[i].id);
    if (!["toBeDelivered", "toBeReceived", "completed"].includes(selection[i].status)) {
      ElMessage.warning("只有待发货,待收货,已完成的订单才能打印，请先取消选择其他订单，再打印");
      return;
    }
  }
  emit("handleToPrint", printIds.value);
}

/* 批量打印快递单 */
function handleBatchPrintExpressSingle(is_merge_order: number) {
  /* 获取选中的数据 */
  let selection = multipleTableRef.value!.store.states.selection.value;
  if (selection.length === 0) {
    ElMessage.warning("请至少选择一条数据");
    return;
  }
  let idArray = [];
  for (const item of selection) {
    idArray.push(item.id);
  }
  expressPrintForm.ids = [];
  for (let i = 0; i < idArray.length; i++) {
    expressPrintForm.ids.push(selection[i].id);
    if (!["toBeDelivered"].includes(selection[i].status)) {
      ElMessage.warning("只有待发货的订单才能打印快递单，请先取消选择其他订单，再打印快递单");
      return;
    }
  }
  expressPrintForm.express_id = "";
  expressPrintForm.is_merge_order = is_merge_order;
  expressDialogVisible.value = true;
}

/* 导出excel */
function handleGetMallOrderExportExcelInfo() {
  toggleState(true);
  /* 可以前端增加 筛选条件 */
  getMallOrderExportExcelInfo<IExportExcel, ISearchMallOrder>(searchCondition)
    .then(res => {
      window.open(import.meta.env.VITE_API_URL + res.result.url, "_blank");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 打印订单 */
function handlePrintOrder(id: number) {
  printIds.value = [];
  printIds.value.push(id);
  emit("handleToPrint", printIds.value);
}
/* 发货 */
function handleGoodsShip(row: IMallOrderListVO) {
  trackingNumberForm.id = row.id;
  trackingNumberForm.express_id = row.express_id === 0 ? "" : row.express_id;
  trackingNumberForm.express_no = row.express_no;
  trackingNumberVisible.value = true;
}

/* 打印快递单 */
function handlePrintExpress(row: IMallOrderListVO) {
  expressPrintForm.ids = [row.id];
  expressPrintForm.express_id = "";
  expressPrintForm.is_merge_order = 0;
  expressDialogVisible.value = true;
}

/* 重新打印快递单 */
function handleReprintPrintExpress(row: IMallOrderListVO) {
  toggleState(true);
  getMallOrderPrintOldExpressInfo({ id: row.id })
    .then(res => {
      ElMessage.success(res.msg);
      if (row.status === "toBeReceived") return;
      /* 修改订单状态 */
      handleChangeOrderStatus(row.id, "toBeReceived");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 取消订单 */
function handleCancelOrder(id: number) {
  toggleState(true);
  putMallOrderCancelInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(id, "cancelled");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 确认收货 */
function handleReceiptOrder(id: number) {
  toggleState(true);
  putMallOrderConfirmInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(id, "completed");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 申请售后 */
function handleApplyRefund(id: number) {
  toggleState(true);
  putMallApplyRefundOrderInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(id, "refunding");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 同意退款 */
function handleAgreeToRefund(id: number) {
  toggleState(true);
  putMallOrderAgreeRefundInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(id, "refunded");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 修改订单状态 */
function handleChangeOrderStatus(id: number, status: string) {
  const item = tableList.value.find(item => item.id === id);
  if (item) {
    item.status = status;
    item.statusName = selectStatus.find(s => s.dictValue === status)?.dictLabel || "";
  }
}

/* 商家备注 */
function handleOrderRemark(row: IMallOrderListVO) {
  sellerRemarkForm.id = row.id;
  sellerRemarkForm.seller_remark = row.seller_remark;
  remarkVisible.value = true;
}
/* 平台备注成功回调 */
function handleRemarkSuccess() {
  const order = tableList.value.find(order => order.id == sellerRemarkForm.id);
  if (order) order.seller_remark = sellerRemarkForm.seller_remark;
  remarkVisible.value = false;
}
/* 批量生成快递单号成功回调 */
function handleExpressPrintSuccess(data: Array<IMallOrderTrackingNumber>) {
  data.forEach(item => {
    const order = tableList.value.find(order => order.id == item.id);
    if (order) {
      order.express_id = Number(item.express_id);
      order.express_no = item.express_no;
      handleChangeOrderStatus(item.id, "toBeReceived");
    }
  });
  expressDialogVisible.value = false;
}
/* 物流单号成功回调 */
function handleRackingNumberSuccess() {
  const order = tableList.value.find(order => order.id == trackingNumberForm.id);
  if (order) {
    order.express_id = Number(trackingNumberForm.express_id);
    order.express_no = trackingNumberForm.express_no;
    handleChangeOrderStatus(trackingNumberForm.id, "toBeReceived");
  }
  trackingNumberVisible.value = false;
}
getTableInfo();
handleGetLogisticsInfo();
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}

.mb10 {
  margin-bottom: 10px;
}
/* 关键：列表右侧操作按钮的对其 */
:deep(.el-space__item) {
  line-height: 15px;
}

.el-button.is-text + .el-button.is-text {
  margin-left: 0;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}
.textAlignCenter {
  text-align: center;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

.w-tag .el-tag {
  margin: 2px 5px;
}
</style>
